var ad_width="100px";
var ad_height="250px";
var ad_width2="100px";
var ad_height2="250px";
var ad_img="img/ad2.jpg";     //300宽*250高
var ad_img2="img/ad1.jpg"     //100宽*高250
var close_img="img/close.png";

//199000932   刘澳琳
//本次把尽力能够模块化函数的所有代码都封装了，有一些没必要

body_w=document.documentElement.clientWidth;    //获取目前浏览器可见宽高
body_h=document.documentElement.clientHeight;
// console.log(body_w,body_h-125);
var ad_down = document.createElement("div");    //创建三个盒子对象
var ad_left = document.createElement("div");
var ad_right = document.createElement("div");
function createDiv(obj,left,top){     //定义盒子的宽高，还有绝对定位显示在最上面以及位置的属性
    obj.style.width = ad_width;
    obj.style.height = ad_height;
    obj.style.padding = "0px";
    obj.style.position = "absolute";          //让广告绝对定位始终在内容之上
    obj.style.left = left;
    obj.style.top = top;
    obj.style.cursor="pointer";
}
createDiv(ad_down,`${body_w-300}px`,`${body_h-250}px`);    //分别创建三个盒子，本来想的是根据可见的宽高来动态确定广告位置
createDiv(ad_left,"230px","20px");                  //作业太多 ，本次重在js实现广告的逻辑
createDiv(ad_right,"1170px","20px");
//199000932 刘澳琳
var adimg=document.createElement("img");    //创建三个img标签
var adimg2=document.createElement("img");
var adimg3=document.createElement("img");
function createImg(obj,box,path){      //给img标签里面的属性赋值并且加入之前创建的盒子，为了位置布局
    obj.src=path;
    box.appendChild(obj);
}
createImg(adimg,ad_down,ad_img);     //分别以以上操作重复创建三个有属性值的img标签
createImg(adimg2,ad_left,ad_img2);
createImg(adimg3,ad_right,ad_img2);
//199000932 刘澳琳
var closeimg=document.createElement("img");        //创建三个关闭按钮的img标签
var closeimg2=document.createElement("img");
var closeimg3=document.createElement("img");
function createClose(obj,box,left,top){
    obj.src=close_img;
    obj.style.width="50px";
    obj.style.position="relative";
    obj.style.left=left;
    obj.style.top=top;
    obj.style.cursor="pointer";     //添加游标，如果鼠标指上去就会变成手指母，很人性化
    box.appendChild(obj);
}
createClose(closeimg,ad_down,"250px","-255px");    //其实定义都差不多
createClose(closeimg2,ad_left,"50px","-255px");
createClose(closeimg3,ad_right,"50px","-255px");

document.documentElement.appendChild(ad_down);//把这3个盒子传输到网页上面去
document.documentElement.appendChild(ad_left);
document.documentElement.appendChild(ad_right);
//199000932 刘澳琳
//以下的代码没有什么好说的，唯一说的就是老师本来的规则是我点击整个盒子(不管是不是关闭按钮)，网页都会把整个广告给关掉
//后来我分开来写，把规则改常规了，点击关闭按钮才关闭广告，点击广告，我就跳转百度
//以下代码还可以精简改善是：1.给每一个标签后面加onclick事件，来到标签就传自己这个对象给一个函数，然后进行同一个操作
//不过我觉得这跟以下这种做法差不多，就没改，还有鼠标滑动的事件，针对top的值，可以动态获取当前可见范围的宽高，来动态改变广告的位置始终在适合的位置
closeimg.addEventListener("click",function(){
    this.style.display = "none";
    ad_down.style.display = "none";
});
closeimg2.addEventListener("click",function(){
    this.style.display = "none";
    ad_left.style.display = "none";
});
closeimg3.addEventListener("click",function(){
    this.style.display = "none";
    ad_right.style.display = "none";
});

adimg.addEventListener("click",function(){  
    window.location.href="http://www.baidu.com";
});
adimg2.addEventListener("click",function(){   
    window.location.href="http://www.baidu.com";
});
adimg3.addEventListener("click",function(){   
    window.location.href="http://www.baidu.com";
});

window.addEventListener("scroll",function(){
    var str1=document.documentElement.scrollTop || document.body.scrollTop;
    ad_down.style.top = (str1+502) + "px";
});
window.addEventListener("scroll",function(){
    var str1=document.documentElement.scrollTop || document.body.scrollTop;
    ad_left.style.top = (str1+20) + "px";
});
window.addEventListener("scroll",function(){
    var str1=document.documentElement.scrollTop || document.body.scrollTop;
    ad_right.style.top = (str1+20) + "px";
});

